import styles from './index.module.less'
import WebsiteImg from '@/assets/report/department/malanhua.png'
import type { SwiperItemProps } from '@/pages/report/department/interface'
import { observer } from 'mobx-react'

export const FirstPage = observer((props: SwiperItemProps) => {
    const {
        current,
        itemIndex,
        store: { dataSource },
    } = props
    const isActive = current === itemIndex
    return (
        <div className={styles.first}>
            <div className={isActive ? styles.first_active : styles.first_center}>
                <img src={WebsiteImg} />
            </div>
            <div className={isActive ? styles.active_wrapper : styles.first_wrapper}>
                <div className={styles.first_wrapper_content}>
                    <h3>@{dataSource?.name}</h3>
                    <h3>{dataSource?.create_date}</h3>
                    <p>您第一次来到</p>
                    <p className={styles.depart}>{dataSource?.platform}</p>
                    <div>
                        <p>
                            在与您同行的 <span>{dataSource?.live_day}</span> 天里，
                        </p>
                        <p>我们之间的默契，无人能取代</p>
                    </div>
                </div>
            </div>
        </div>
    )
})

export default FirstPage
